<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>泉州文化地图·智游古城</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/main.js" defer></script>
    <script src="js/heritage.js"></script>
    <!-- Leaflet CSS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
    <!-- Leaflet JavaScript -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
	<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
	<script src="http://api.map.baidu.com/api?v=3.0&ak=sb7KQxowjqngFbax6jgaaGM6RnBk6dYa"></script>
</head>
<body>

<div id="container">
    <!-- 顶部信息栏 -->
    <div class="top-bar">
        <div class="container">
            <span><i class="fas fa-phone"></i> 旅游咨询：1234-567890</span>
            <span><i class="fas fa-clock"></i> 开放时间：08:00 - 18:00</span>
            <div class="language-switcher">
                <a href="#" class="active">中文</a>
                <a href="#">English</a>
            </div>
        </div>
    </div>

    <!-- 导航栏 -->
    <header class="navbar">
        <div id="navigationBar">
            <div class="logo">
                <img src="images/logo.jpg" alt="泉州文化地图">
                <h1>智游泉州</h1>
            </div>
            <nav class="main-nav">
                <ul class="nav-menu">
                    <li class="nav-item active"><a href="index.html">首页</a></li>
                    <li class="nav-item"><a href="heritage-list.html">世遗景点</a></li>
                    <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
                        特色体验
                      </a>
                      <div class="dropdown-menu">
                    	<a class="dropdown-item" href="intangible-culture.html">非遗传承</a>
                    	<a class="dropdown-item" href="food-map.html">美食打卡</a>
                    </li>
                    <li class="nav-item"><a href="historical-research.html">历史研学</a></li>
                    <li class="nav-item"><a href="study-materials.html">学习资源</a></li>
                    <li class="nav-item"><a href="ai-itinerary.html">AI行程规划</a></li>
                    <li class="nav-item user-actions">
                        <a href="user-center.html" class="user-icon"><i class="fas fa-user-circle"></i></a>
                    </li>
                </ul>
            </nav>
            <button class="menu-toggle" aria-label="切换导航菜单">
                <i class="fas fa-bars"></i>
            </button>
        </div>
    </header>

    <!-- 轮播图 -->
    <section class="hero">
        <div class="hero-slider">
            <div class="slide active">
                <img src="images/slider1.jpg" alt="开元寺">
                <div class="slide-content">
                    <h2>千年古都·海丝起点</h2>
                    <p>探索世界遗产，感受闽南文化</p>
                    <a href="heritage-list.html" class="btn-primary">了解更多</a>
                </div>
            </div>
            <div class="slide">
                <img src="images/slider2.jpeg" alt="洛阳桥">
                <div class="slide-content">
                    <h2>非遗传承·匠心独具</h2>
                    <p>体验传统技艺，感受大师风采</p>
                    <a href="intangible-culture.html" class="btn-primary">立即体验</a>
                </div>
            </div>
            <div class="slide">
                <img src="images/slider3.jpg" alt="泉州美食">
                <div class="slide-content">
                    <h2>舌尖上的泉州</h2>
                    <p>寻味古城记忆，打卡地道美食</p>
                    <a href="food-map.html" class="btn-primary">开始探索</a>
                </div>
            </div>
        </div>
        <div class="slider-dots"></div>
    </section>

    <!-- 主体内容 -->
    <main class="main-content">
        <!-- 热门推荐 -->
        <section class="recommendations container">
            <h2 class="section-title">热门推荐</h2>
            <div class="recommendation-tabs">
                <button class="tab-btn active" data-tab="spots">景点推荐</button>
                <button class="tab-btn" data-tab="foods">美食推荐</button>
                <button class="tab-btn" data-tab="courses">非遗课程</button>
            </div>
            <div class="tab-content-container">
                <div class="tab-content" id="spots">
                    <div class="card-grid">
                        <div class="card">
                            <img src="images/recommend1.jpeg" alt="开元寺">
                            <div class="card-content">
                                <h3>开元寺</h3>
                                <p>始建于唐垂拱二年（686年），是福建省规模最大的佛教寺院</p>
                                <div class="card-footer">
                                    <span>开放时间：08:00 - 18:00</span>
                                    <span>门票：免费</span>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <img src="images/recommend2.jpg" alt="清净寺">
                            <div class="card-content">
                                <h3>清净寺</h3>
                                <p>中国现存最早的伊斯兰教寺宇，展现多元文化交融的历史见证</p>
                                <div class="card-footer">
                                    <span>开放时间：08:30 - 17:30</span>
                                    <span>门票：免费</span>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <img src="images/recommend3.jpeg" alt="洛阳桥">
                            <div class="card-content">
                                <h3>洛阳桥</h3>
                                <p>中国古代四大名桥之一，开创了梁式石桥建造的新技术</p>
                                <div class="card-footer">
                                    <span>开放时间：全天</span>
                                    <span>门票：免费</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="tab-content hidden" id="foods">
                    <div class="card-grid">
                        <div class="card">
                            <img src="images/food1.jpg" alt="面线糊">
                            <div class="card-content">
                                <h3>面线糊</h3>
                                <p>以细如发丝的面线煮制而成，配以海鲜或猪肉熬制的高汤</p>
                                <div class="card-footer">
                                    <span>推荐店铺：阿秋面线糊</span>
                                    <span>人均消费：15元</span>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <img src="images/food2.jpeg" alt="润饼">
                            <div class="card-content">
                                <h3>润饼</h3>
                                <p>薄饼包裹花生碎、蔬菜、肉丝等配料，口感丰富</p>
                                <div class="card-footer">
                                    <span>推荐店铺：泉南佛国润饼</span>
                                    <span>人均消费：10元</span>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <img src="images/food3.jpeg" alt="石花膏">
                            <div class="card-content">
                                <h3>石花膏</h3>
                                <p>传统消暑甜品，由海石花提炼制成，清凉解渴</p>
                                <div class="card-footer">
                                    <span>推荐店铺：百年石花膏</span>
                                    <span>人均消费：8元</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="tab-content hidden" id="courses">
                    <div class="card-grid">
                        <div class="card">
                            <img src="images/course1.jpeg" alt="拍胸舞">
                            <div class="card-content">
                                <h3>拍胸舞教学</h3>
                                <p>国家级非物质文化遗产，体验最具代表性的闽南民间舞蹈</p>
                                <div class="card-footer">
                                    <span>授课老师：陈家明</span>
                                    <span>费用：100元/课时</span>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <img src="images/course2.jpeg" alt="南音">
                            <div class="card-content">
                                <h3>南音演奏</h3>
                                <p>中国现存最古老的乐种之一，被誉为'中国音乐史上的活化石'</p>
                                <div class="card-footer">
                                    <span>授课老师：林美兰</span>
                                    <span>费用：150元/课时</span>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <img src="images/course3.jpeg" alt="木偶戏">
                            <div class="card-content">
                                <h3>提线木偶</h3>
                                <p>世界级非遗项目，感受精湛的操控技艺</p>
                                <div class="card-footer">
                                    <span>授课老师：黄志伟</span>
                                    <span>费用：200元/课时</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </main>

    <!-- 地图区域 -->
    <section class="map-section container">
        <h2 class="section-title">泉州文化地图</h2>
        <div id="map-container"></div>
        <div class="map-controls">
            <button class="btn-secondary" onclick="resetMap()">重置地图</button>
            <button class="btn-secondary" onclick="locateUser()">我的位置</button>
        </div>
    </section>
	    <script>
	        var map;
	        var markers = []; // 用于存储添加的标记
	
	        function initMap() {
	            map = new BMap.Map("map-container");
	            var point = new BMap.Point(118.596767, 24.907444); // 泉州的经纬度（这里是一个示例点，可以替换为泉州文化景点的中心点）
	            map.centerAndZoom(point, 12);
	
	            addMarker(new BMap.Point(118.610603, 24.913758), "开元寺");
	            addMarker(new BMap.Point(118.589674, 24.903548), "西街");
				addMarker(new BMap.Point(118.5925,24.9096), "清净寺");
				addMarker(new BMap.Point(118.6722,24.9578), "洛阳桥");
	            // 显示当前位置
	            locateUser();
	        }
	
	        function addMarker(point, title) {
	            var marker = new BMap.Marker(point);
	            map.addOverlay(marker);
	            var infoWindow = new BMap.InfoWindow(title);
	            marker.addEventListener("click", function() {
	                this.openInfoWindow(infoWindow);
	            });
	            markers.push(marker);
	        }
	
	        function locateUser() {
	            var geolocation = new BMap.Geolocation();
	            geolocation.getCurrentPosition(function(r) {
	                if (this.getStatus() == BMAP_STATUS_SUCCESS) {
	                    var mk = new BMap.Marker(r.point);
	                    map.addOverlay(mk);
	                    map.panTo(r.point);
	                    map.clearOverlays(markers); // 清除之前的标记
	                    addMarker(r.point, "当前位置");
	                } else {
	                    alert('定位失败，错误信息：' + this.getStatus());
	                }
	            }, {enableHighAccuracy: true});
	        }
	
	        function resetMap() {
	            map.clearOverlays(); // 清除所有覆盖物
	            var point = new BMap.Point(118.596767, 24.907444); // 重新设置泉州的中心点
	            map.centerAndZoom(point, 12);
	            // 重新添加文化景点标记
	            addMarker(new BMap.Point(118.610603, 24.913758), "开元寺");
	            addMarker(new BMap.Point(118.589674, 24.903548), "西街");
	        }
	
	        // 初始化地图
	        window.onload = initMap;
	    </script>

    <!-- 页脚 -->
    <footer class="site-footer">
        <div class="container">
            <div class="footer-grid">
                <div class="footer-section">
                    <h3>关于本站</h3>
                    <p>"智游泉州"文旅平台致力于打造一站式泉州文化旅游服务平台，整合泉州优质旅游资源，为游客提供智能化、个性化的旅行体验。</p>
                </div>
                <div class="footer-section">
                    <h3>快速链接</h3>
                    <ul class="footer-links">
                        <li><a href="#">常见问题</a></li>
                        <li><a href="#">联系我们</a></li>
                        <li><a href="#">隐私政策</a></li>
                        <li><a href="#">使用条款</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h3>关注我们</h3>
                    <div class="social-icons">
                        <a href="#"><i class="fab fa-weibo"></i></a>
                        <a href="#"><i class="fab fa-weixin"></i></a>
                        <a href="#"><i class="fab fa-qq"></i></a>
                        <a href="#"><i class="fab fa-facebook"></i></a>
                    </div>
                </div>
            </div>
            <div class="copyright">
                <p>&copy; 2025 泉州文化旅游发展有限公司 版权所有</p>
                <p>技术支持：<a href="#">2人团队</a></p>
            </div>
        </div>
    </footer>

    <!-- 回到顶部按钮 -->
    <a href="#top" class="back-to-top" aria-label="回到顶部">
        <i class="fas fa-arrow-up"></i>
    </a>

</div>

</body>
</html>